<template>
	<div :class="isBtnShow ? '' : 'maskDisabled1'">
		<div class="tabs-cps-view" v-loading="contentData.length == 0"
			:class="isBtnShow ? '' : 'maskDisabled2'">
			<div class="add-view" v-if="isBtnShow">
				<el-button size="small" @click="save(1)" :disabled="delFlg"
					:style="{ background: addFlg ? '#bc000f' : '', color: addFlg ? 'white' : '', borderColor: addFlg ? '#bc000f' : '' }">
					{{ $t("message.bhView.topBtnDownList.addition") }}
				</el-button>
				<el-button size="small" @click="delResOfferEjectDataApi" :disabled="addFlg || noDataFlg"
					:style="{ background: delFlg ? '#bc000f' : '', color: delFlg ? 'white' : '', borderColor: delFlg ? '#bc000f' : '' }">

					{{ $t("message.bhView.topBtnDownList.delete") }}
				</el-button>
			</div> 

			<div :class="!addFlg && noDataFlg ? 'maskDisabled1' : ''">
				<div class="tabs-cps-view" v-loading="contentData.length == 0"
					:class="!addFlg && noDataFlg ? 'maskDisabled2' : ''">

					<div class="row">
						<div class="item">
							<div class="label">
								{{ $t("message.rightMessage.tab1.label_1") }}
							</div>
							<!-- <el-input v-model="value" class="ipt yellow"></el-input> -->
							<el-date-picker v-model="contentData.ssnDate" type="month" class="ipt orange"
								placeholder=" " :clearable="false" :format="timeFormat" :value-format="timeFormat">
							</el-date-picker>
						</div>
						<div class="item">
							<div class="label">
								{{ $t("message.rightMessage.tab1.label_2") }}
							</div>
							<div class="radio-view">
								<el-radio :key="index" v-for="(item, index) in distinguishRadioData"
									v-model="contentData.actuKbn" :label="index == 0 ? 1 : 0"
									:disabled="contentData.OldActuKbn != 1 && !addFlg ? true : false" :value="index">{{
										item
									}}</el-radio>
							</div>
						</div>
					</div>

					<div class="row">
						<div class="item">
							<div class="label">
								{{ $t("message.rightMessage.tab1.label_5") }}
							</div>
							<el-select v-model="contentData.oCodName" class="ipt orange" placeholder=" ">
								<el-option v-for="item in wrkClsListData" :key="item.label" :label="item.label"
									:value="item.label">
								</el-option>
							</el-select>
						</div>
						<div class="item">
							<div class="label">
								{{ $t("message.rightMessage.tab1.label_6") }}
							</div>
							<el-select v-model="contentData.cCodName" class="ipt" placeholder=" ">
								<el-option v-for="item in clnClsListData" :key="item.label" :label="item.label"
									:value="item.label">
								</el-option>
							</el-select>
						</div>
					</div>

					<div class="row">
						<div class="item">
							<div class="label">
								{{ $t("message.rightMessage.tab1.label_7") }}
							</div>
							<el-select v-model="contentData.iCodName" class="ipt" placeholder=" ">
								<el-option v-for="item in icdWrkListData" :key="item.label" :label="item.label"
									:value="item.label">
								</el-option>
							</el-select>
						</div>
					</div>

					<div class="row" style="border-bottom: 1px solid #d9d9d9; margin-bottom: 12px">
						<div class="item long-item">
							<div class="label">
								{{ $t("message.rightMessage.tab1.label_8") }}
							</div>
							<el-input v-model="contentData.conCts3" class="ipt long-ipt"
								@input="contentData.conCts3 = $setMaxLength(contentData.conCts3, 1000)"></el-input>
						</div>
					</div>

					<div class="row">
						<div class="item">
							<div class="label">
								{{ $t("message.rightMessage.tab1.label_9") }}
							</div>
							<el-select v-model="contentData.rcodName" class="ipt" placeholder=" ">
								<el-option v-for="item in ispRstListData" :key="item.label" :label="item.label"
									:value="item.label">
								</el-option>
							</el-select>
						</div>
						<div class="item">
							<div class="label">
								{{ $t("message.rightMessage.tab1.label_10") }}
							</div>
							<el-select v-model="contentData.dCodName" class="ipt" placeholder=" ">
								<el-option v-for="item in dpsTypeListData" :key="item.label" :label="item.label"
									:value="item.label">
								</el-option>
							</el-select>
						</div>
					</div>

					<div class="row">
						<div class="item long-item">
							<div class="label">
								{{ $t("message.rightMessage.tab1.label_11") }}
							</div>
							<el-input type="textarea" :rows="10" placeholder=" " v-model="contentData.summary"
								@input="contentData.summary = $setMaxLength(contentData.summary, 2000)"
								class="textarea long-ipt"></el-input>
						</div>
					</div>

					<div class="row" style="border-bottom: 1px solid #d9d9d9; margin-bottom: 12px">
						<div class="item long-item">
							<div class="label">
								{{ $t("message.rightMessage.tab1.label_12") }}
							</div>
							<el-input type="textarea" :rows="4" placeholder=" " v-model="contentData.cntPln"
								@input="contentData.cntPln = $setMaxLength(contentData.cntPln, 600)"
								class="textarea long-ipt"></el-input>
						</div>
					</div>

					<div class="row">
						<div class="item long-item">
							<div class="label">
								{{ $t("message.rightMessage.tab1.label_13") }}
							</div>
							<el-input type="textarea" :rows="4" placeholder=" " v-model="contentData.conCts1"
								@input="contentData.conCts1 = $setMaxLength(contentData.conCts1, 1000)"
								class="textarea long-ipt"></el-input>
						</div>
					</div>

					<div class="row">
						<div class="item long-item">
							<div class="label">
								{{ $t("message.rightMessage.tab1.label_14") }}
							</div>
							<el-input type="textarea" :rows="4" placeholder=" " v-model="contentData.conCts2"
								@input="contentData.conCts2 = $setMaxLength(contentData.conCts2, 1000)"
								class="textarea long-ipt"></el-input>
						</div>
					</div>

					<div class="row">
						<div class="item long-item">
							<div class="label">
								{{ $t("message.rightMessage.tab1.label_15") }}
							</div>
							<el-input type="textarea" :rows="4" placeholder=" " v-model="contentData.ispCts1"
								@input="contentData.ispCts1 = $setMaxLength(contentData.ispCts1, 1000)"
								class="textarea long-ipt"></el-input>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getResOfferEjectData, delResOfferEjectData, offerDetiaMsgTips } from "@/api/api";
import base from '@/utils/base.js'
import tools from '@/utils/tools.js'
import eventBus from "@/eventBus/bus";
import BASE from '@/utils/base';
import _ from 'lodash-es';
import { getLocalStorage } from "../../../../utils/storage";
export default {
	name: "Tab_1",
	props: {
		offerComboxData: Object,
		tableSelectRow: Object,
		isBtnShow: Boolean
	},

	data() {
		return {
			delFlg: false,
			noDataFlg: false,
			userData: getLocalStorage('userData'),
			value: "",
			radio: "1",
			options: [],
			optionsValue: "",
			textarea: "",
			dateValue: "",

			distinguishRadioData: [],
			clnClsListData: [],
			wrkClsListData: [],
			icdWrkListData: [],
			ispRstListData: [],
			dpsTypeListData: [],

			contentData: {
				actuAble: "enable",
				actuKbn: 0,
				cCodName: "",
				cntPln: "",
				conCts1: "",
				dCodName: "",
				conCts2: "",
				conCts3: "",
				cxCodName: "",
				iCodName: "",
				ispCts1: "",
				ixCodName: "",
				oCodName: "",
				oxCodName: "",
				rcodName: "",
				ssnDate: "",
				summary: "",
				xConCts1: "",
				xConCts2: "",
				xConCts3: "",
				xIspCts1: "",
				xSsnDate: "",
			},
			oldContentData: {},
			// timeFormat: base.IP.indexOf("eng") == -1 ?  "yyyy-MM" : "MM-yyyy" 
			timeFormat: "yyyy-MM",
			startData: null,
			addFlg: false
		};
	},
	computed: {
		macCodeValue() {
			return this.$store.state.macCode;
		},
	},

	components: {},
	watch: {
		offerComboxData(nVal) {
			this.initDatas();
		},

		tableSelectRow: {
			deep: true,
			immediate: true,
			handler: function (newV, oldV) {
				console.log(newV)
				//如果列表不为空并且，不是tabs切换就加载
				this.dateValue = this.tableSelectRow ? this.tableSelectRow.ssn_date : '';
				if (newV != 'listEmpty' && oldV) {
					// this.contentData = [];
					this.getResOfferEjectDataApi();
				}
				if (newV == 'listEmpty') {
					this.noDataFlg = true;
					this.contentData = {
						actuAble: "enable",
						actuKbn: 0,
						cCodName: "",
						cntPln: "",
						conCts1: "",
						dCodName: "",
						conCts2: "",
						conCts3: "",
						cxCodName: "",
						iCodName: "",
						ispCts1: "",
						ixCodName: "",
						oCodName: "",
						oxCodName: "",
						rcodName: "",
						ssnDate: "",
						summary: "",
						xConCts1: "",
						xConCts2: "",
						xConCts3: "",
						xIspCts1: "",
						xSsnDate: "",
					};
					console.log("列表为空")
					// this.save();
					setTimeout(() => {
						this.$emit('DataChangeFn', false);
					}, 500);
				}
				// this.getResOfferEjectDataApi();
				// if (this.isEmptyObject(this.$store.state.MSC_Info)) {
				// 	this.getResOfferEjectDataApi();
				// } else {
				// 	this.contentData = this.$store.state.MSC_Info;
				// }
			},
		},

		macCodeValue: {
			deep: true,
			handler: function (newV, oldV) {
				this.getResOfferEjectDataApi();
			},
		},
		addFlg: {
			deep: true,
			handler: function (newV, oldV) {
				this.contentData.addFlg = newV;
			},
		},

		contentData: {
			deep: true,
			handler: function (newV, oldV) {
				this.contentData.addFlg = this.addFlg;
				this.contentData.noDataFlg = this.noDataFlg;
				localStorage.setItem("E_MST", JSON.stringify(newV))
				// console.log(JSON.parse(localStorage.getItem("E_MST")))
				// this.contentData = JSON.parse(localStorage.getItem("E_MST"));
				// this.$store.commit("changeMSC_Info", newV);
				if (newV.ssnDate == '') {
					this.$emit("changeBTN", true);
				} else {
					this.$emit("changeBTN", false);
				}

				if (newV.actuKbn == 1) {
					this.$emit("isDisabledFlgOne", 1)
				} else if (newV.actuKbn == 0) {
					this.$emit("isDisabledFlgOne", 0)
				}

				// console.log(_.isEqual(newV));
				// console.log(_.isEqual(this.startData));
				// console.log(_.isEqual(newV, this.startData));
				// if (_.isEqual(newV, this.startData) || newV.ssnDate == '') {
				// 	this.$store.state.isStop.flg = false;
				// } else {
				// 	this.$store.state.isStop.flg = true;
				// }

				//	某些未null的值，在输入，并删除后会成”“比较=》失败
				Object.keys(newV).forEach((key) => {
					if (newV[key] == '') {
						this.startData[key] = '';
					}
					if (key == 'addFlg' || key == 'noDataFlg' || key == 'OldActuKbn' || key == 'actuKbn') {
						this.startData[key] = newV[key];
					}
				})

				if (Object.keys(newV).length != Object.keys(this.startData).length) {
					this.$emit('DataChangeFn', true)
					return
				}


				console.log("tab1", newV, this.startData);

				this.$emit('DataChangeFn', !_.isEqual(newV, this.startData))
			},
		},

	},
	methods: {
		fatherFn() {
			this.addFlg = true;
			console.log(this.contentData)

			this.$emit("changeType", 1);
			this.contentData.actuAble = "enable"
			this.contentData.actuKbn = 0
			this.contentData.cCodName = ""
			this.contentData.cntPln = ""
			this.contentData.conCts1 = ""
			this.contentData.dCodName = ""
			this.contentData.conCts2 = ""
			this.contentData.conCts3 = ""
			this.contentData.cxCodName = ""
			this.contentData.iCodName = ""
			this.contentData.ispCts1 = ""
			this.contentData.ixCodName = ""
			this.contentData.oCodName = ""
			this.contentData.oxCodName = ""
			this.contentData.rcodName = ""
			this.contentData.ssnDate = ""
			this.contentData.summary = ""
			this.contentData.xConCts1 = ""
			this.contentData.xConCts2 = ""
			this.contentData.xConCts3 = ""
			this.contentData.xIspCts1 = ""
			this.contentData.xSsnDate = ""
			console.log(this.contentData)
			this.contentData.OldXssnDate = '';
			this.contentData.OldSsnDate = '';
			this.contentData.OldActuKbn = 0;
		},
		//重置
		save(type) {

			//初始监听状态

			eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样


			let Fn = () => {
				let qq = "ssqcop";
				this.addFlg = true;
				console.log(this.contentData)

				this.$emit("changeType", 1);
				this.contentData.actuAble = "enable"
				this.contentData.actuKbn = 0
				this.contentData.cCodName = ""
				this.contentData.cntPln = ""
				this.contentData.conCts1 = ""
				this.contentData.dCodName = ""
				this.contentData.conCts2 = ""
				this.contentData.conCts3 = ""
				this.contentData.cxCodName = ""
				this.contentData.iCodName = ""
				this.contentData.ispCts1 = ""
				this.contentData.ixCodName = ""
				this.contentData.oCodName = ""
				this.contentData.oxCodName = ""
				this.contentData.rcodName = ""
				this.contentData.ssnDate = ""
				this.contentData.summary = ""
				this.contentData.xConCts1 = ""
				this.contentData.xConCts2 = ""
				this.contentData.xConCts3 = ""
				this.contentData.xIspCts1 = ""
				this.contentData.xSsnDate = ""
				console.log(this.contentData)
				this.contentData.OldXssnDate = '';
				this.contentData.OldSsnDate = '';
				this.contentData.OldActuKbn = 0;
				// this.startData = _.cloneDeep(this.contentData);
			}
			/**
			 * 2。  记录当前函数。
			 */
			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);

				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
			}



		},
		//初始化
		initDatas() {
			console.log(this.offerComboxData, "JJJJJJJJJJJJJJJJJj")
			if (this.offerComboxData) {
				// this.distinguishRadioData = ["計画","実施"];
				this.distinguishRadioData = this.offerComboxData.distinguish
					? this.offerComboxData.distinguish
					: [];
				this.clnClsListData = this.offerComboxData.clnClsList
					? this.offerComboxData.clnClsList
					: [];
				this.wrkClsListData = this.offerComboxData.wrkClsList
					? this.offerComboxData.wrkClsList
					: [];
				this.icdWrkListData = this.offerComboxData.icdWrkList
					? this.offerComboxData.icdWrkList
					: [];
				this.ispRstListData = this.offerComboxData.ispRstList
					? this.offerComboxData.ispRstList
					: [];
				this.dpsTypeListData = this.offerComboxData.dpsTypeList
					? this.offerComboxData.dpsTypeList
					: [];
			}
		},
		//削除
		async delResOfferEjectDataApi() {
			this.delFlg = true;
			let E_MST = JSON.parse(localStorage.getItem("E_MST"));
			let msg = await this.getDelMsg(3);

			this.$confirm(msg, '', {
				confirmButtonText: 'OK',
				cancelButtonText: 'Cancel',
				type: 'warning'
			}).then(() => {
				let datJson = {
					dmgCode: this.$store.state.macCode,
					ssnDate: E_MST.ssnDate,
					xXSsnDate: E_MST.xSsnDate,
				}
				delResOfferEjectData(datJson).then((res) => {
					// this.getResOfferEjectDataApi();
					console.log(res);
					if (res.data.code != 0) {
						this.$message({
							type: 'error',
							message: res.data.msg
						});
						return
					}
					this.$message({
						type: 'success',
						message: 'OK'
					});
					setTimeout(() => {
						eventBus.$emit("refreshForMSC");
						this.delFlg = false;
					}, 500);
				})
			}).catch(() => {
				this.delFlg = false;
			});
		},
		async getDelMsg(type) {
			let E_MST = JSON.parse(localStorage.getItem("E_MST"));
			console.log(E_MST)
			let dataJson = {
				type,	//1新增2，修改，3削除
				dmgCode: this.$store.state.macCode,
				actuNo: E_MST.actuKbn,
				actuKbn: Number(E_MST.OldActuKbn),
				Action: 1,
				SsnDate: E_MST.ssnDate
			}
			let res = await offerDetiaMsgTips(dataJson);
			if (res.data.code != 0) {
				return '削除？'
			}
			return res.data.data;
		},
		//获取数据
		getResOfferEjectDataApi() {
			this.$emit("changeType", 2)
			this.contentData.actuAble = "enable"
			this.contentData.actuKbn = 0
			this.contentData.cCodName = ""
			this.contentData.cntPln = ""
			this.contentData.conCts1 = ""
			this.contentData.dCodName = ""
			this.contentData.conCts2 = ""
			this.contentData.conCts3 = ""
			this.contentData.cxCodName = ""
			this.contentData.iCodName = ""
			this.contentData.ispCts1 = ""
			this.contentData.ixCodName = ""
			this.contentData.oCodName = ""
			this.contentData.oxCodName = ""
			this.contentData.rcodName = ""
			this.contentData.ssnDate = ""
			this.contentData.summary = ""
			this.contentData.xConCts1 = ""
			this.contentData.xConCts2 = ""
			this.contentData.xConCts3 = ""
			this.contentData.xIspCts1 = ""
			this.contentData.xSsnDate = ""
			let temp = {
				dmgCode: this.$store.state.macCode || 0,
				ssnDate: this.dateValue,
				PltCode: this.$store.state.pltCode == "" ? 0 : this.$store.state.pltCode,
			};
			console.log(temp, "TTTTTTTTTTTTTTTTTTTT")

			//     temp.dmgCode = 18886;
			//     temp.ssnDate = "2071-04";

			getResOfferEjectData(temp).then((res) => {

				if (res.data.code == -300) {
					// this.save();
					this.noDataFlg = true;
					this.addFlg = false;
				}
				if (res.data.code == 0 && res.data.data.length > 0) {
					this.noDataFlg = false;
					this.contentData = res.data.data[0];
					this.contentData.OldXssnDate = this.contentData.xSsnDate;
					this.contentData.OldSsnDate = this.contentData.ssnDate;
					this.contentData.OldActuKbn = this.contentData.actuKbn;
					localStorage.setItem("E_MST", this.contentData);

					this.startData = _.cloneDeep(this.contentData);
					this.addFlg = false;

					setTimeout(() => {
						this.$store.commit('reSetIsStop');
					}, 300);
					// let tempDate = this.contentData.ssnDate;
					// // 年-月
					// var r0 = tempDate.match(
					// 	/^([0-9]{4}|[0-9]{2})-([0]?[1-9]|[1][0-2])$/
					// );

					// // 月-年
					// var r1 = tempDate.match(
					// 	/^([0]?[1-9]|[1][0-2])-([0-9]{4}|[0-9]{2})$/
					// );

					// if(r0 && !r1)
					// 	this.timeFormat = "yyyy-MM";
					// else if(!r0 && r1)
					// 	this.timeFormat = "MM-yyyy";

				}
			});
		},
		isEmptyObject(obj) {
			for (var key in obj) {
				return false;
			}
			return true;
		},
	},
	created() {
		this.initDatas();
	},
	mounted() {
		this.initDatas();
		console.log(localStorage.getItem("E_MST") == '')
		console.log(!localStorage.getItem("E_MST"))
		if (localStorage.getItem("E_MST") == '' || !localStorage.getItem("E_MST")) {
			this.getResOfferEjectDataApi();
		} else {
			this.contentData = JSON.parse(localStorage.getItem("E_MST"));
			this.startData = _.cloneDeep(this.contentData);
			this.addFlg = this.contentData.addFlg;
			this.noDataFlg = this.contentData.noDataFlg;
		}


		eventBus.$on("isGetNewForMSC", () => {
			this.getResOfferEjectDataApi();
		})

		eventBus.$on("resetSaveForMSC", () => {
			this.save();
		})

		if (BASE.IP == "http://192.168.33.200:8085") {
			this.timeFormat = "yyyy-MM";
		} else if (BASE.IP == "https://eng-dev-api.a-mis.com") {
			this.timeFormat = "MM-yyyy";
		} else if (BASE.IP == "https://demoapi.richtechcn.com") {
			this.timeFormat = "yyyy-MM";
		}
	},
	beforeDestroy() {
		this.startData = _.cloneDeep({});
		this.$store.state.isStop.name = 'default';
		this.$store.state.isStop.flg = false;
		this.contentData.addFlg = this.addFlg;
		this.contentData.noDataFlg = this.noDataFlg;
	},
	destroyed() { },
};
</script>
<style lang="scss" scoped>
.tabs-cps-view {
	width: 100%;

	.row {
		display: flex;
		justify-content: space-between;
		padding-bottom: 12px;

		.item {
			width: 48%;
			display: flex;
			justify-content: flex-start;

			.label {
				min-width: 95px;
				display: flex;
				align-items: center;
			}

			// .right-view {
			//   width: calc(100% - 94px);
			// }
		}

		.long-item {
			width: 100%;

			.long-ipt {
				width: calc(100% - 103px);

				::v-deep .el-input__inner {
					width: 100%;
					height: 32px;
				}
			}
		}
	}
}

.radio-view {
	width: 218px;
	height: 32px;
	border-radius: 4px;
	border: 1px solid #d9d9d9;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ipt {
	width: 218px;
	height: 32px;

	::v-deep .el-input__inner {
		width: 218px;
		height: 32px;
	}

	::v-deep .el-input__inner:focus {
		border: 1px solid #dcdfe6;
	}

	::v-deep .el-input__icon {
		line-height: 32px;
		color: #909399;
	}

	::v-deep .el-input__suffix {
		width: 32px;
		right: 0;
		background: #dee0e3;
	}
}

.picker {
	width: 130px;

	::v-deep .el-input__inner {
		width: 130px;
	}

	::v-deep .el-input__suffix {
		background: transparent;
	}
}

.orange {
	::v-deep .el-input__inner {
		background: #ffdeac;
	}
}

.yellow {
	::v-deep .el-input__inner {
		background: #ffffe1;
	}
}

.textarea {
	::v-deep .el-textarea__inner {
		resize: none;
		// background: #ffffe1;
	}
}

.add-view {
	width: 100%;
	padding-bottom: 12px;
	border-bottom: 1px solid #d9d9d9;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 12px;

	button {
		// width: 68px;
		// height: 32px;
		// background: #ffffff;
		// border: 1px solid #d9d9d9;
		margin-left: 12px;
		border-radius: 4px;
	}
}
</style>
